<template>
  <div class="nav-bg flex-fill">
    <ul class="nav flex-column">
      <li class="nav-item py-1" v-for="item in menus" :key="item.id">
        <router-link
          class="nav-link text-white-50 d-flex align-items-center cursor"
          aria-current="page"
          :to="item.routerName ? { name: item.routerName } : item.path"
        >
          <i :class="[getIcon(item), 'pe-3 text-light']"></i>
          {{ item.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const props = defineProps({
  menus: { type: Array, default: () => [] },
});
const router = useRouter();
function getIcon(item) {
  const res = router
    .getRoutes()
    .find((o) =>
      item.routeName ? o.name === item.routeName : o.path === item.path
    );
  return res?.meta?.icon;
}
</script>

<style scoped lang="scss">
.nav-item {
  &:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  .active {
    background: rgba(255, 255, 255, 0.3);
  }
}
</style>